<template>
  <view class="product" @click="viewProduct(product.id)">
    <view class="image-wrap"><image :style="productStyle" class="image" :src="product.images[0]" mode="widthFix" /></view>
    <view class="name-wrap"><text class="name">{{ product.name }}</text></view>
    <view class="price-wrap">
      <text class="price-new">{{ product.price_format }}</text>
      <text class="price-old" v-if="product.price != product.origin_price && product.origin_price > 0">{{product.origin_price_format}}</text>
    </view>
  </view>
</template>

<script setup>
import { toRefs, computed } from 'vue'
const props = defineProps({
  product: {
    type: Object,
    default: () => {}
  }
})

// 计算一行两个的商品宽高
const productStyle = computed(() => {
  let size = (uni.getSystemInfoSync().windowWidth - uni.upx2px(40)) / 2 - uni.upx2px(10)
  return `width: ${size}px; height: ${size}px;`
})

const { product } = toRefs(props)

const viewProduct = (id) => {
  uni.navigateTo({
    url: `/pages/product/product?id=${id}`
  })
}
</script>

<style lang="scss" scoped>
.product {
  background-color: #fff;
  margin-top: 20rpx;
  // border-radius: 10rpx;
  overflow: hidden;

  // #ifdef APP-PLUS-NVUE
  display: flex;
  // #endif

  .image-wrap {
    margin-bottom: 20rpx;

    .image {
      width: 100%;
      height: 100%;
    }
  }

  .name-wrap {
    padding: 0 20rpx;
    line-height: 1.2;
    // 两行
    // #ifndef APP-PLUS-NVUE
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    // #endif
    height: 66rpx;
    overflow: hidden;
    // word-break: break-all;
    margin-bottom: 20rpx;
    // #ifdef APP-PLUS-NVUE
    lines: 2; //NVUE下要用这个属性，来让文字超出隐藏变省略号
    // #endif
    .name {
      font-size: 28rpx;
      line-height: 32rpx;
      color: #333;
    }
  }

  .price-wrap {
    display: flex;
    padding: 0 20rpx 20rpx 20rpx;
    font-size: 26rpx;
    color: #333;
    line-height: 1;
    flex-direction: row;
    align-items: flex-end;
    // justify-content: space-between;

    .price-new {
      // color: #f00;
      color: $price-color;
      font-weight: bold;
    }

    .price-old {
      color: #999;
      font-size: 24rpx;
      margin-left: 10rpx;
      text-decoration: line-through;
    }
  }
}
</style>
